<template>
	<view class="page">
		<!-- #ifdef H5 -->
		<topVue title="用户中心" :rightIcon="isLogin ? 'setting' : ''"></topVue>
		<!-- #endif -->

		<scroll-view class="main-content" scroll-y>
			<view class="avatarVue flex align-center">
				<u-avatar :src="isLogin ? user.header : '1' " mode="circle" size="80"></u-avatar>
				<view class="right flex-between align-center">
					<text class="name" v-if="isLogin && user.username">{{ user.username | conceal()}}</text>
					<text @click="isLogin ? '' : $store.state.show = true" class="name" v-else>请登录</text>
				</view>

				<view class="btns flex" v-if="isLogin">
					<view class="btn">{{user.membershipName?user.membershipName:'基础会员'}}</view>
					<view class="btn" @click="isLogin ? $tools.route('./vip') : $store.state.show=true">购买会员</view>
				</view>
			</view>
			<view class="pointVue margin30">
				<view class="label">积分管理</view>
				<view class="flex-between margin20">
					<view class="info flex-column flex-between">
						<text style="color: #A3ACAD;">AI视频</text>
						<text
							style="color: #17AD84; font-weight: 600; font-size: 30rpx;">{{ aiVideoPoints }}</text>
					</view>
					<view class="info flex-column flex-between">
						<text style="color: #A3ACAD;">AI信息</text>
						<text
							style="color: #347EEF; font-weight: 600; font-size: 30rpx;">{{ aiWechatPoints }}</text>
					</view>
				</view>
				<view class="flex-between margin20">
					<view class="li" @click="isLogin ? $tools.route('./charge') : $store.state.show=true">积分充值</view>
					<view class="li" @click="isLogin ? $tools.route('./record') : $store.state.show=true">积分记录</view>
				</view>
			</view>

			<view class="exchangeVue margin30" v-if="isLogin">
				<view class="flex-between">
					<view class="label">兑换码</view>
					<text style="color: #6AA1F8; text-decoration: underline;" @click="$tools.route('./exchange')">兑换管理</text>
				</view>
				<view class="flex margin20 align-center">
					<input type="text" placeholder="请输入兑换码" v-model="code" />
					<view class="btn" @click="getRedemptionCode()" >兑换</view>
				</view>
			</view>

			<view class="myManager margin30">
				<view class="label">我的管理</view>
				<view class="li flex-between align-center margin20" @click="$u.toast('暂未开放')">
					<view class="flex align-center">
						<image src="../../static/mine/m1.png" style="width: 42rpx; height: 42rpx; margin-right: 15rpx;">
						</image>
						<text>微信管理</text>
					</view>
					<image src="../../static/more.png" style="width: 50rpx; height: 50rpx;"></image>
				</view>
				<view class="li flex-between align-center" @click="isLogin ? $tools.route('./voice') : $store.state.show=true">
					<view class="flex align-center">
						<image src="../../static/mine/m2.png" style="width: 38rpx; height: 38rpx; margin-right: 15rpx;"></image>
						<text>声音管理</text>
					</view>
					<image src="../../static/more.png" style="width: 50rpx; height: 50rpx;"></image>
				</view>
				<!-- <view class="li flex-between align-center" @click="$u.toast('暂未开放')">
					<view class="flex align-center">
						<image src="../../static/mine/m3.png" style="width: 42rpx; height: 42rpx; margin-right: 15rpx;">
						</image>
						<text>产品管理</text>
					</view>
					<image src="../../static/more.png" style="width: 50rpx; height: 50rpx;"></image>
				</view> -->
				<!-- <view class="li flex-between align-center" style="border: none;"
					@click="isLogin ? $tools.route('./award') : $store.state.show=true"> -->
				<view class="li flex-between align-center" @click="isLogin ? $tools.route('./award'): $store.state.show=true" >
				<!-- <view class="li flex-between align-center" @click="$u.toast('暂未开放')" > -->
					<view class="flex align-center">
						<image src="../../static/mine/m4.png" style="width: 38rpx; height: 38rpx; margin-right: 15rpx;">
						</image>
						<text>收益管理</text>
					</view>
					<image src="../../static/more.png" style="width: 50rpx; height: 50rpx;"></image>
				</view>
			</view>

			<view class="myWork margin30" v-if="isLogin">
				<view class="flex-between">
					<view class="label">我的AI视频作品</view>
					<text style="color: #6AA1F8; text-decoration: underline;" @click="$tools.route('./myVideo')">更多作品</text>
				</view>
				<view class="box margin20 flex-wrap flex-between">
					<view class="w100 flex-column align-center padding-column20" v-if="isEmpty">
						<image src="../../static/empty.png" style="width: 256rpx; height: 256rpx;"></image>
						<text style="color: #81868e;">AI视频作品为空</text>
					</view>
					<view class="boxLi relative" v-for="(item, index) in userVideo" :key="index">
						<view class="videoVue relative">
							<image src="../../static/play.png"  style="width: 60rpx; height: 60rpx;z-index: 99;" class="absolute-auto" @click="playVideo(item.videoUrl)" v-if="item.videoUrl"></image>
							<image :src="item.videoUrl+'?x-oss-process=video/snapshot,t_1,f_jpg,w_320,m_fast,ar_auto'" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 12rpx 12rpx 0 0" v-if="item.videoUrl"></image>
							<view v-else>
								<u-circle-progress active-color="#3B82F6" width="180" :percent="item.progress" bg-color="transparent" class="absolute-center" style="top: 111rpx;"></u-circle-progress>
								<text class="absolute-auto" style="color: #81868e;">{{item.status<3?item.progress+'%':'合成失败'}}</text>
							</view>
						</view>
						<view class="botVue flex-between align-center relative">
							<text class="line-1" style="padding-right: 30rpx; color: #333;">{{ item.name }}</text> 
							<u-icon name="more-dot-fill" size="32" @click="toOpration(item.id)"></u-icon>
							<view class="inner flex absolute-middle" :style="{left: oprationId === item.id ? 0 : '-10000rpx'}">
								<view class="menu download" @click="oprationFun(item, 1)">下载</view>
								<view class="menu" @click="oprationFun(item, 2)">删除</view>
								<view class="menu" @click="oprationFun(item, 3)">{{ item.publiced ? "私密" : "公开"}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部Tabbar -->
		<u-tabbar
			v-model="$store.state.tabbarCurrent"
			:list="$store.state.tabbar"
			icon-size="70"
			height="120rpx"
			:bg-color="bgColor"
			active-color="#fff"
			inactive-color="#fff"
			@change="tabbarChange"
		></u-tabbar>

		<!-- 登录弹框 -->
		<loginVue :show="$store.state.show" @callBack="getUserVideo"></loginVue>

		<myVideo ref="myVideo" v-show="isPlay" @quit="isPlay = false"></myVideo>
		
	</view>
</template>

<script>
	import myVideo from "@/components/myVideo.vue"
	import { mapState } from "vuex"
	export default {
		components: {
			myVideo
		},
		data() {
			return {
				bgColor: "linear-gradient(to right, #49DC83, #3B83F4)",
				userVideo: [],
				code: "",
				isEmpty: false,
				createVideoContext: null,
				videoSrc: "",
				aiVideoPoints: 0,
				aiWechatPoints: 0,
				oprationId: "",
				show: false,
				isPlay: false,
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
				isLogin: state => state.isLogin
			})
		},
		async onShow() {
			await this.getUserVideo()
			await this.getPoint()
		},
		methods: {
			toOpration(id){
				if(this.oprationId===id) this.oprationId = ""
				else this.oprationId = id
			},
			
			playVideo(videoUrl){
				this.isPlay = true
				this.$refs.myVideo.videoPlay(videoUrl)
			},
			
			isWeChat() {
			    const userAgent = navigator.userAgent.toLowerCase();
			    return userAgent.includes('micromessenger');
			},
			
			oprationFun(item, index){
				console.log("ppp", item, index)
				switch(index){
					case 1:
						this.oprationId = ""
						console.log("是否是微信浏览器", this.isWeChat())
						if(this.isWeChat()) {
							// this.show = true
							uni.setClipboardData({
								data: item.videoUrl,
								success() {
									uni.showToast({
										title: "下载链接已复制",
										duration: 2000,
										icon: "none"
									})
								}
							})
						}else {
							window.open(item.videoUrl)
						}
					break;
					
					case 2:
						this.$request("/shuziren/userVideo", {
							id: item.id
						}, "DELETE").then(res=>{
							if(res.code===200) {
								this.oprationId = ""
								this.$u.toast("删除成功")
								this.getUserVideo()
							}
						})
					break;
					
					case 3:
						this.$u.toast("暂未开放")
					break;
				}
			},
			tabbarChange(index) {
				this.$store.state.tabbarCurrent = index;
				uni.setStorageSync("tabbarCurrent", index)
				uni.switchTab({
					url: this.$store.state.tabbar[index].path
				})
			},
			async initialization() {
				this.getUserVideo()
				this.getPoint()
			},
			// 获取积分
			async getPoint(){
				const res = await this.$request("/aiet-user-center/user/points/summary", {}, "GET")
				if(res.code===200) {
					this.aiVideoPoints = res.data.aiVideoPoints
					this.aiWechatPoints = res.data.aiWechatPoints
				}
			},
			// 获取用户AI作品
			async getUserVideo() {
				const res = await this.$request("/shuziren/userVideo/user", {
					pageNum: 0,
					pageSize: 4
				}, "GET")
				if(res.code === 200) {
					this.userVideo = res.data.content
					this.isEmpty = res.data.content.length===0
				}
				console.log("用户视频制作", this.userVideo)
			},

			// 使用兑换码
			async getRedemptionCode() {
				if(!this.code) return this.$u.toast("兑换码不能为空")
				const res = await this.$request("/aiet-user-center/user/redemptionCode/update", {
					code: this.code,
					used: true,
					usedId:this.user.id
				}, "PUT")
				if (res.code === 200){
					this.code = ""
					this.initialization();
					this.$u.toast("兑换成功")
				}else{
					this.$u.toast(res.msg)
				}
			},
			
			download(url){
				window.open(url)
			}
		}
	}
</script>

<style lang="less" scoped>
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 212rpx);
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #48D685, #3C87EF);

		.avatarVue {
			width: 100%;
			height: 140rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;

			.btns {
				right: 30rpx;
				top: 20rpx;

				.btn {
					width: 150rpx;
					height: 54rpx;
					background: #FEF9C3;
					text-align: center;
					line-height: 54rpx;
					color: #BC8B42;
					font-size: 24rpx;
					margin-left: 15rpx;
				}

				.btn:nth-child(2) {
					background: #DBEAFE;
					color: #4F6BC6;
				}
			}

			.right {
				flex: 1;
				height: 80rpx;
				padding-left: 20rpx;
				.name {
					font-weight: 600;
					line-height: 1;
				}
			}
		}

		.pointVue {
			width: 100%;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;

			.label {
				font-weight: 700;
				font-size: 30rpx;
				color: #000;
			}

			.info {
				width: 300rpx;
				height: 150rpx;
				background: #F0FDF4;
				border-radius: 12rpx;
				padding: 30rpx;
			}

			.info:nth-child(2) {
				background: #EFF6FF;
			}

			.li {
				width: 300rpx;
				height: 76rpx;
				text-align: center;
				line-height: 76rpx;
				color: #fff;
				background: #22C55E;
				border-radius: 10rpx;
			}

			.li:nth-child(2) {
				color: #333;
				background: #F3F4F6;
			}
		}

		.exchangeVue {
			width: 100%;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;

			.label {
				font-weight: 700;
				font-size: 30rpx;
				color: #000;
			}

			input {
				flex: 1;
				height: 80rpx;
				border: 1rpx solid #DBEAFE;
				border-radius: 12rpx;
				padding-left: 20rpx;
				font-size: 28rpx;
			}

			.btn {
				width: 100rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				background: #22C55E;
				border-radius: 12rpx;
				margin-left: 30rpx;
			}
		}

		.myManager {
			width: 100%;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;

			.label {
				font-weight: 700;
				font-size: 30rpx;
				color: #000;
			}

			.li {
				width: 100%;
				height: 120rpx;
				border-bottom: 1rpx solid #f5f5f5;

				text {
					color: #000;
				}
			}
		}

		.myWork {
			width: 100%;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			.label {
				font-weight: 700;
				font-size: 30rpx;
				color: #000;
			}
			.boxLi {
				width: 310rpx;
				height: 480rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				.videoVue {
					width: 310rpx;
					height: 400rpx;
				}
				.botVue {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 26rpx;
					background: #f5f5f5;
					padding: 0 20rpx;
					border-radius: 0 0 12rpx 12rpx;
					.inner {
						z-index: 99;
						.menu {
							width: 70rpx;
							height: 52rpx;
							line-height: 52rpx;
							background: #f5f5f5;
							font-size: 24rpx;
							text-align: center;
							margin: 0 5rpx;
							border-radius: 6rpx;
						}
						.menu:nth-child(1) {
							margin-left: 0;
							background: #48D685;
							color: #fff;
						}
						.menu:nth-child(2) {
							background: #d81e06;
							color: #fff;
						}
						.menu:nth-child(3) {
							background: #3C87EF; 
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
